<template>
    <div>
        <a-page-header style="padding: 0" @back="handleBack">
            <template #title>
                <div class="font-w-b" style="font-size: 14px">{{ systemName }}系统--{{ versionNumber }}解决业务需求明细</div>
            </template>
        </a-page-header>

        <a-table bordered class="margin-t-16" rowKey="id" size="small" :pagination="false" :columns="columnsD" :data-source="list">
            <template #requestDesc="{ text }">
                <div style="white-space: pre-wrap" v-html="text" />
            </template>
            <template #onlineTime="{ text }">
                {{ $filters.dateFilter(text) }}
            </template>
        </a-table>
    </div>
</template>

<script lang="ts">
import { detailZiyanData } from '@/views/energyManage/versionReportHistory/config/columns';
const { columnsD } = detailZiyanData;
import api from '@/api';
import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { defineComponent, reactive, toRefs, getCurrentInstance, nextTick } from 'vue';
export default defineComponent({
    setup() {
        const { handleBack } = useRouterApi({
            backQuery: {
                path: 'energyManage/versionReportHistory'
            }
        });
        const instance: any = getCurrentInstance();
        const route = useRoute();
        const state = reactive<any>({
            list: [],
            versionNumber: 0,
            systemName: ''
        });
        const getDetailData = async () => {
            const query = {
                ids: route.query.id
            };
            const { success, moule, errorMsg } = await api.pmpRequestInfoModel.findByIds(query);
            if (success) {
                state.list = [...moule];
                if (moule && moule.length) {
                    state.systemName = moule[0].systemName;
                    nextTick(() => {
                        document.querySelectorAll('.ant-table-body img').forEach((item: any) => {
                            item.addEventListener('click', () => {
                                instance.proxy.$mitt.emit('previewImg', item.src);
                            });
                            item.style.cursor = 'zoom-in';
                        });
                    });
                }
            } else {
                message.error(errorMsg);
            }
        };
        getDetailData();
        state.versionNumber = route.query.versionNumber;
        return {
            columnsD,
            ...toRefs(state),
            handleBack
        };
    }
});
</script>

<style scoped lang="less">
// 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-divider) {
    border-top: 2px solid #eaf5fe;
}
::v-deep(.ant-table-row) {
    p {
        margin: 0;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        img {
            height: 300px;
        }
    }
}
</style>